<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   
        *{
            margin:0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            /* min-width: 360px;
            min-height: 480px; */
        }
        .header {
            /* width: 100%; 如果你不写这句，它还是会铺满，因为 div 是块级元素*/
            display:flex;
        }
        .header a{
            flex:1;
        }
        .header  img{
            width: 100%;
            
        }
        .content{
            display: flex;
            flex-direction: column;
            padding: 10px;
        }
        .public{
    flex: 1;
    height: 100px;
    background-color: palevioletred;
    border-radius: 10px;
    margin: 5px;
    display: flex;
}
.public>div{
    flex:1;
    border-right: 1px solid white;
}
/* 找public的直接子元素，其实是所有子元素 */
.public>div:last-child{
    border:0 none;
}
.top{
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-bottom: 1px solid white;
}
.bot{

    text-align: center;
    line-height: 50px;
}

.public:nth-child(2){
    background-color: rgba(29, 143, 219);
}
.public:nth-child(3){
    background-color: green;
}
.public:nth-child(4){
    background-color: orange;
}

.footer{
    display: flex;
    flex-direction: column;
}

.footer .imgs{
    flex: 1;
    display: flex;
}

.footer .imgs a{
    flex: 1;
}

.footer .imgs img{
    width: 100%;
}

.footer .link{
    flex: 1;
    border-top: 1px solid #ccc;
    height: 60px;
    display: flex;
}
.footer .link a{
    flex: 1;
    text-align: center;
    line-height: 60px;
}
    </style>
</head>
<body>
    <!-- 头部开始 -->
     <div class="header">
        <a href="#">
            <img src="./伸缩布局-材料包/CSS3伸缩布局-携程布局案例/img/banner.jpg">
        </a>
     </div>
     <!-- 头部结束 -->


      <!-- 主开始 -->
<div class="content">
    <div class="public">
    <div class="left"></div>
    <div class="middle">
        <div class="top">首页</div>
        <div class="bot">携程旅游</div>
    </div>
    <div class="right">
        <div class="top">联系我们</div>
        <div class="bot">关于我们</div>
    </div>
    </div>

    <div class="public">
    <div class="left"></div>
    <div class="middle">
        <div class="top">首页</div>
        <div class="bot">携程旅游</div>
    </div>
    <div class="right">
        <div class="top">联系我们</div>
        <div class="bot">关于我们</div>
    </div>
    </div>

    <div class="public">
    <div class="left"></div>
    <div class="middle">
        <div class="top">首页</div>
        <div class="bot">携程旅游</div>
    </div>
    <div class="right">
        <div class="top">联系我们</div>
        <div class="bot">关于我们</div>
    </div>
    </div>

     <div class="public">
    <div class="left">
        <div class="top">首页</div>
        <div class="bot">携程旅游</div>
    </div>
    <div class="middle">
        <div class="top">首页</div>
        <div class="bot">携程旅游</div>
    </div>
    <div class="right">
        <div class="top">联系我们</div>
        <div class="bot">关于我们</div>
    </div>
    </div>
</div>
<!-- 主体结束 -->

<!-- 底部开始 -->
<div class="footer">
    <div class="imgs">
        <a href="#"><img src="./伸缩布局-材料包/CSS3伸缩布局-携程布局案例/img/extra_1.png" alt=""></a>
        <a href="#"><img src="./伸缩布局-材料包/CSS3伸缩布局-携程布局案例/img/extra_2.png" alt=""></a>
    </div>
    <div class="link">
        <a href="#">联系我们</a>
        <a href="#">联系我们</a>
        <a href="#">联系我们</a>
    </div>
</div>
<!-- 底部结束 -->
</body>
</html>